<template>
	<view class="container">
		<!-- 页面内容 -->
		<view class="content">
			<!-- 提示文字 -->
			<view class="tip-text">请选择反馈类型：</view>

			<!-- 欢迎语 -->
			<view class="welcome-text">
				欢迎大家在这里给我们提供相关的建议，我们会用心倾听客户的声音
			</view>

			<!-- 反馈选项卡片 -->
			<view class="feedback-cards">
				<!-- 我要提需求 -->
				<view class="card" @click="selectFeedback('demand')">
					<view class="card-header">
						<view class="card-icons">
							<u-icon name="bulb" color="#ff9900" size="28"></u-icon>
							<u-icon name="chat" color="#19be6b" size="28"></u-icon>
						</view>
						<text class="card-title">我要提需求</text>
					</view>
					<text class="card-desc">希望新增哪些产品功能</text>
				</view>

				<!-- 发现有缺陷 -->
				<view class="card" @click="selectFeedback('defect')">
					<view class="card-header">
						<view class="card-icons">
							<u-icon name="warning" color="#e43d33" size="28"></u-icon>
							<u-icon name="search" color="#2979ff" size="28"></u-icon>
						</view>
						<text class="card-title">发现有缺陷</text>
					</view>
					<text class="card-desc">使用功能过程中有异常</text>
				</view>

				<!-- 其他意见 -->
				<view class="card" @click="selectFeedback('other')">
					<view class="card-header">
						<view class="card-icons">
							<u-icon name="file-text" color="#8a6d3b" size="28"></u-icon>
							<view class="badge">3</view>
						</view>
						<text class="card-title">其他意见</text>
					</view>
					<text class="card-desc">任何评价和意见都可在这里说</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 可以添加状态数据
			}
		},
		methods: {
			// 选择反馈类型
			selectFeedback(type) {
				console.log('选择的反馈类型:', type)
				// 根据类型跳转到不同的反馈页面
				uni.navigateTo({
					url: `/pages/my/demand?type=${type}`
				})
				// 也可以显示提示信息
				uni.showToast({
					title: '即将跳转',
					icon: 'success'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		min-height: 100vh;
		background-color: #f5f5f5;
	}

	.content {
		padding: 30rpx;
		padding-top: 80rpx;
	}

	.navbar-right {
		padding-right: 30rpx;
	}

	.tip-text {
		font-size: 32rpx;
		color: #333333;
		font-weight: 600;
		margin-bottom: 20rpx;
	}

	.welcome-text {
		font-size: 28rpx;
		color: #666666;
		line-height: 1.6;
		margin-bottom: 40rpx;
		padding: 20rpx;
		background-color: #ffffff;
		border-radius: 12rpx;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
	}

	.feedback-cards {
		display: flex;
		flex-direction: column;
		gap: 24rpx;
	}

	.card {
		background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
		border-radius: 16rpx;
		padding: 30rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
		border: 1rpx solid #e8e8e8;
		transition: all 0.3s ease;

		&:active {
			transform: scale(0.98);
			box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
		}
	}

	.card-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 16rpx;
	}

	.card-icons {
		display: flex;
		gap: 12rpx;
		position: relative;
	}

	.badge {
		position: absolute;
		top: -8rpx;
		right: -8rpx;
		background-color: #e43d33;
		color: #ffffff;
		font-size: 20rpx;
		padding: 4rpx 8rpx;
		border-radius: 12rpx;
		min-width: 24rpx;
		text-align: center;
	}

	.card-title {
		font-size: 32rpx;
		color: #333333;
		font-weight: 600;
	}

	.card-desc {
		font-size: 26rpx;
		color: #666666;
		line-height: 1.5;
	}

	/* 响应式设计 */
	@media (max-width: 375px) {
		.content {
			padding: 20rpx;
		}

		.card {
			padding: 24rpx;
		}

		.card-title {
			font-size: 30rpx;
		}

		.card-desc {
			font-size: 24rpx;
		}
	}

	/* 动画效果 */
	.card {
		// animation: fadeInUp 0.6s ease-out;
	}

	.card:nth-child(1) {
		animation-delay: 0.1s;
	}

	.card:nth-child(2) {
		animation-delay: 0.2s;
	}

	.card:nth-child(3) {
		animation-delay: 0.3s;
	}

	@keyframes fadeInUp {
		from {
			opacity: 0;
			transform: translateY(30rpx);
		}

		to {
			opacity: 1;
			transform: translateY(0);
		}
	}
</style>